<template>
  <div class="BookDetailsView">
    <return-field :ItemContent="ItemContent"></return-field>
    <head-content :HeadContent="HeadContent"></head-content>
    <book-catalogue
      :ItemContent="ItemContent"
      class="book-catalogue"
    ></book-catalogue>
    <book-buy-nav :ItemContent="ItemContent"></book-buy-nav>
  </div>
</template>

<script>
import { BookDetails } from "@/api/request";
import ReturnField from "@/components/BookDetailsView/ReturnField.vue";
import HeadContent from "@/components/BookDetailsView/HeadContent.vue";
import BookCatalogue from "@/components/BookDetailsView/BookCatalogue.vue";
import BookBuyNav from "@/components/BookDetailsView/BookBuyNav.vue";
export default {
  name: "BookDetailsView",
  components: {
    ReturnField,
    HeadContent,
    BookCatalogue,
    BookBuyNav,
  },
  data() {
    return {
      itemID: 0,
      ItemContent: [],
      // 头部组件需要的数据
      HeadContent: {},
      activeName: "a",
      // 存储浏览记录
      StorageBookList: [],
    };
  },

  // 路由守卫
  // beforeRouteEnter(to, from, next) {
  //   next((vm) => {
  //     if (!localStorage.getItem("user")) {
  //       vm.$toast({
  //         message: "还没登录呢",
  //         type: "fail",
  //       });
  //       next({
  //         path: "/LoginAndEgistration",
  //         query: {
  //           netxUrl: to.fullPath,
  //         },
  //       });
  //     } else {
  //       next();
  //     }
  //   });
  // },

  activated() {
    this.itemID = this.$route.query.id;
    // 搜索点击节目传过来的
    console.log("传过来的", this.$route.query);
    // 调用节目数据
    this.GetMessage();

    // 发送数据到简介和目录
    this.$bus.$emit("SendItemContent", this.ItemContent);

    this.StorageBookList = JSON.parse(localStorage.getItem("BookList"));
  },
  mounted() {
    this.$nextTick(() => {
      console.log(this.StorageBookList);
    });
  },
  methods: {
    // 请求节目数据
    GetMessage() {
      BookDetails(this.itemID).then(({ data }) => {
        this.ItemContent = data.data;
        console.log("请求到的数据", this.ItemContent);

        // 头部数据
        this.HeadContent = {
          title: this.ItemContent.title,
          backgroundImg: this.ItemContent.background_img,
          updateTime: this.ItemContent.update_time,
          subtitle: this.ItemContent.subtitle,
          status: this.ItemContent.status,
        };

        // 存储
        if (!this.StorageBookList.length) {
          this.StorageBookList.push({
            title: this?.ItemContent.title,
            id: this.ItemContent.content_id,
            author: this.ItemContent.author,
            background_img: this.ItemContent.background_img,
            subtitle: this.ItemContent.subtitle,
          });
          // console.log(this.StorageBookList);
          // 存储浏览数据
          localStorage.setItem(
            "BookList",
            JSON.stringify(this.StorageBookList)
          );
        } else {
          for (let i in this.StorageBookList) {
            console.log("这个是i", i);
            // console.log(this.StorageBookList[i]);
            if (this.StorageBookList[i].id !== this.ItemContent.content_id) {
              console.log("这个是if里面的呀i", i);

              this.StorageBookList.push({
                title: this?.ItemContent.title,
                id: this.ItemContent.content_id,
                author: this.ItemContent.author,
                background_img: this.ItemContent.background_img,
                subtitle: this.ItemContent.subtitle,
              });
              // console.log(this.StorageBookList);
              // 存储浏览数据
            }
            localStorage.setItem(
              "BookList",
              JSON.stringify(this.StorageBookList)
            );
          }
        }
      });
    },
    // 存储节目数据
    StorageBook() {
      // 定义数组;
      // console.log("数组", StorageBookList);
    },
  },

  watch: {
    // 在App页面使用:key="$route.fullPath"
    //  这个模块数据更新没有问题 但搜索模块出现问题
    // 所以单独放在搜索页 然后这一块页面 使用强制刷新
    $route(to, from) {
      // console.log("to", to);
      // console.log("form", from);
      if (to.query.id != from.query.id) {
        this.$router.go(0);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.BookDetailsView {
  height: 100vh;
  padding: 0 0;
  .book-catalogue {
    width: 100%;
    position: absolute;
    top: 21.875rem;
  }
  // 选中颜色#29364b
}
</style>